<template>
  <div class="app-container hk-flex-column">
    <!-- 出入境记录 -->
    <search-form
      class="table"
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      :list-type-info="dictList"
      @handleSearch="handleQuery"
      @handleReset="resetQuery"
    />
    <el-row>
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      <el-button size="small" @click="importTemplate">下载模板</el-button>
      <el-button size="small" @click="handleImport">导入</el-button>
      <el-button size="small" @click="handleExport">导出查询结果</el-button>
    </el-row>
    <hk-table
      :table-data="tableData"
      :table-columns="tableList"
      :selection="false"
      :show-index="true"
      :total="total"
      :loading="loading"
      :table-height="80"
      operate
      operate-width="180"
      class="table"
      :query-params="queryParams"
      @handleSelectionChange="handleSelectionChange"
      @changePage="getDataList"
    >
      <!-- 操作权限 -->
      <template #operate="scope">
        <!-- <el-button size="mini" type="text" @click="handleDetail(scope.row)">查看</el-button> -->
        <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
      </template>
      <!-- 审批意见 -->
      <template #opinions="scope">
        <span>{{ scope.row.opinions*1==1?'同意':'驳回' }}</span>
      </template>
    </hk-table>
    <enex-drawer ref="post_drawer" :title="title" @handleSubmit="handleSubmit" />
    <hk-upload ref="import_dia" :url="url" title="导入" :accept="accept" success-desc="上传成功" @submit="getDataList()" />
  </div>
</template>

<script>
import SearchForm from '@/components/HkSearchform/index.vue'
import HkTable from '@/components/Hk-Table/index.vue'
import enexDrawer from './components/enexDrawer.vue'
import { pageList, deleteItem, getDict } from '@/api/specialProject/exit'

export default {
  components: {
    SearchForm,
    HkTable,
    enexDrawer
  },
  data() {
    return {
      queryParams: {
        current: 1,
        size: 10
      },
      checkedList: [],
      tableData: [],
      total: 0,
      loading: false,
      url: window.baseUrl.action + '/entryexit/import',
      accept: '.xlsx',
      tableList: [
        { label: '申请人', param: 'applicantName' },
        { label: '出入境时间段', param: 'entryTime' },
        { label: '目的地', param: 'destination' },
        { label: '申请理由', param: 'reason' },
        { label: '审批意见', param: 'opinions' }
      ],
      filterInfo: {
        fieldList: [
          { label: '关键字', type: 'input', field: 'applicantName', placeholder: '请输入申请人', maxlength: 20 },
          { label: '审批意见', type: 'select', field: 'opinions', list: 'examineList' },
          // { label: '时间', type: 'datetime', field: 'exitTime', list: 'timeList' }
          { label: '时间', type: 'dateRange', field: 'time' }
        ]
      },
      title: '',
      dictList: {
        examineList: []
      }
    }
  },
  mounted() {
    this.getDataList()
    this.getDictDatas()
  },
  methods: {
    // 查询列表
    getDataList(val) {
      this.queryParams = { ...this.queryParams, ...val }
      this.loading = true
      this.queryParams.startTime = this.queryParams.time?.[0]
      this.queryParams.endTime = this.queryParams.time?.[1]
      pageList(this.queryParams).then((res) => {
        this.loading = false
        this.tableData = res.list
        this.total = res.total
      })
    },
    // 字典获取
    getDictDatas() {
      getDict({ code: 'approvalOpinions' }).then((res) => {
        this.dictList.examineList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
    },
    //  查询
    handleQuery() {
      this.queryParams.current = 1
      this.getDataList()
    },
    //  重置
    resetQuery() {
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.getDataList()
    },

    handleSelectionChange(obj) {
      this.checkedList = obj
    },
    handleDetail(row) {
      this.title = '详情'
      this.$refs.post_drawer.show(row)
    },
    handleAdd() {
      this.title = '新增'
      this.$refs.post_drawer.show()
    },
    handleEdit(row) {
      this.title = '编辑'
      this.$refs.post_drawer.show(row)
    },
    handleSubmit() {
      this.resetQuery()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除所选数据项？')
        .then(function() {
          return deleteItem({ id: row.id })
        })
        .then(() => {
          this.resetQuery()
          this.$modal.msgSuccess('删除成功')
        })
        .catch((error) => {
          console.log(error)
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      // this.$refs.import_dia.upload.open = true
      this.$refs.import_dia.show()
    },
  /** 下载模板操作 */
    importTemplate() {
      this.gDownload(window.baseUrl.action + '/entryexit/exportTemplate', {}, `出入境申请导入模板.xlsx`)
    },
    /** 导出按钮操作 */
    handleExport() {
      // this.gDownload(window.baseUrl.action + '/entryexit/export', {}, `出入境${new Date().getTime()}.xlsx`)
      this.download(window.baseUrl.action + '/entryexit/export',
        {
          ...this.queryParams
        },
        `出入境${new Date().getTime()}.xlsx`, 'object')
    }
  }
}
</script>

<style lang="scss" scoped>
// 灰色背景下
// .dark-theme {
//   .table {
//     background: #092351 !important;
//     border: 1px solid rgba(59, 139, 255, 0.4);
//   }
// }
.el-row {
  position: absolute;
  right: 20px;
  top: 50px;
}
.total-title {
  margin-bottom: 15px;
  margin-top: 6px;
  line-height: 24px;
}
.font-size16 {
  font-size: 16px;
}
.flex-1 {
  flex: 1;
  justify-content: space-between;
  height: 100%;
}
.font-c-blue {
  color: #4b6eef;
  font-size: 36px;
}
.mt-20 {
  margin-top: 20px;
}
::v-deep {
  .content {
    padding-bottom: 0;
  }
}
</style>
